import { useState, useEffect, useRef } from "react";
import Usecreatetoolsdata from "../hooks/Usecreatetoolsdata";
import PropTypes from "prop-types";
import img from "../assets/公司年会背景.gif";
// 图片懒加载
import LazyLoad from "react-lazyload";
const LazyLoadImage = ({ src, alt, ...props }) => {
  return (
    <LazyLoad height={200} offset={50}>
      <img src={src} alt={alt} {...props} />
    </LazyLoad>
  );
};
LazyLoadImage.propTypes = {
  src: PropTypes.string.isRequired,
  alt: PropTypes.string.isRequired,
};

function AinputDraft() {
  const toolsData = Usecreatetoolsdata();
  const slideWidth = 180; // 每个工具项的宽度，可根据实际情况调整
  const [scrollLeft, setScrollLeft] = useState(0);
  const handlePrevClick = () => {
    setScrollLeft((prevScrollLeft) => Math.max(prevScrollLeft - slideWidth, 0));
  };
  const handleNextClick = () => {
    setScrollLeft((prevScrollLeft) => prevScrollLeft + slideWidth);
  };
  const videoRef = useRef(null);
  useEffect(() => {
    const video = videoRef.current;
    const handleMouseEnter = () => {
      if (video.paused) {
        video.play();
      }
    };
    const handleMouseLeave = () => {
      if(!video.paused){
        video.pause()
      }
    }
    // 为 video 元素添加事件监听器
    if(video){
        video.addEventListener('mouseenter', handleMouseEnter);
        video.addEventListener('mouseenter', handleMouseEnter);
      }
    // 在组件卸载时移除事件监听器，避免内存泄漏
    return ()=>{
      if(video){
        video.removeEventListener('mouseenter', handleMouseEnter);
        video.removeEventListener('mouseenter', handleMouseEnter);
      }
    }
  }, []);
  return (
    <div>
      <div className="input-draft">
        <div className="top">
          <div>
            <span style={{ float: "left" }}>大家都在搜</span>
            <LazyLoadImage
              src="https://cdn.dancf.com/fe-assets/20241206/6ffff94e20e122666ad8076c61f96999.svg"
              className="img"
              alt=""
            />
          </div>
          <div className="center">
            <div className="left">
              <dl>
                <dt>
                  <LazyLoadImage
                    src="https://gd-filems.dancf.com/gaoding/gaoding/74244/9431adad-6b0d-4013-90c9-243cee2b907411267.png?x-oss-process=image/resize,w_84,h_84,type_6/sharpen,120/interlace,1/format,webp"
                    alt=""
                  />
                </dt>
                <dd>
                  <p>新年</p>
                </dd>
              </dl>
              <dl>
                <dt>
                  <LazyLoadImage src={img} alt="" />
                </dt>
                <dd>
                  <p>公司年会背景</p>
                </dd>
              </dl>
              <dl>
                <dt>
                  <LazyLoadImage
                    src="https://gd-filems.dancf.com/gaoding/gaoding/53357/64a046e5-0cd7-41c1-a2e7-58799b1c0d2f197225.png?x-oss-process=image/resize,w_84,h_84,type_6/sharpen,120/interlace,1/format,webp"
                    alt=""
                  />
                </dt>
                <dd>
                  <p>春年海报</p>
                </dd>
              </dl>
              <dl>
                <dt>
                  <LazyLoadImage
                    src="https://gd-filems.dancf.com/gaoding/gaoding/72176/73576ba68a454fceb9280a53adfd3690.jpg?x-oss-process=image/resize,w_84,h_84,type_6/sharpen,120/interlace,1/format,webp"
                    alt=""
                  />
                </dt>
                <dd>
                  <p>放假通知</p>
                </dd>
              </dl>
              <dl>
                <dt>
                  <LazyLoadImage
                    src="https://gd-filems.dancf.com/gaoding/gaoding/74244/bad8b99bc44b4888b343eab7c6312404.jpg?x-oss-process=image/resize,w_84,h_84,type_6/sharpen,120/interlace,1/format,webp"
                    alt=""
                  />
                </dt>
                <dd>
                  <p>除夕</p>
                </dd>
              </dl>
            </div>
            <div className="right">
              <dl>
                <dt>
                  <LazyLoadImage
                    src="https://gd-filems.dancf.com/gaoding/gaoding/53357/40fbda225adc4711b852061db8f29509.jpg?x-oss-process=image/resize,w_84,h_84,type_6/sharpen,120/interlace,1/format,webp"
                    alt=""
                  />
                </dt>
                <dd>
                  <p>大寒</p>
                </dd>
              </dl>
              <dl>
                <dt>
                  <LazyLoadImage
                    src="https://gd-filems.dancf.com/gaoding/gaoding/74244/d7bd7308304c4fbbaae5b32484cbbd68.jpg?x-oss-process=image/resize,w_84,h_84,type_6/sharpen,120/interlace,1/format,webp"
                    alt=""
                  />
                </dt>
                <dd>
                  <p>新春</p>
                </dd>
              </dl>
              <dl>
                <dt>
                  <LazyLoadImage
                    src="https://gd-filems.dancf.com/gaoding/gaoding/74244/af75cd34d8eb41cbbd6ffc8d704d592e.jpg?x-oss-process=image/resize,w_84,h_84,type_6/sharpen,120/interlace,1/format,webp"
                    alt=""
                  />
                </dt>
                <dd>
                  <p>2025</p>
                </dd>
              </dl>
              <dl>
                <dt>
                  <LazyLoadImage
                    src="https://gd-filems.dancf.com/gaoding/gaoding/21652/a0c1f4ba291a4420890fb0330811202a.jpg?x-oss-process=image/resize,w_84,h_84,type_6/sharpen,120/interlace,1/format,webp"
                    alt=""
                  />
                </dt>
                <dd>
                  <p>小年</p>
                </dd>
              </dl>
              <dl>
                <dt>
                  <LazyLoadImage
                    src="https://gd-filems.dancf.com/gaoding/gaoding/71355/ba949d01-9467-48d6-86fb-c3e7fa5a86b8119688.jpg?x-oss-process=image/resize,w_84,h_84,type_6/sharpen,120/interlace,1/format,webp"
                    alt=""
                  />
                </dt>
                <dd>
                  <p>表格</p>
                </dd>
              </dl>
            </div>
          </div>
        </div>
        <div className="bottom">
          <div className="bottom-top">
            <p>
              从工具开始
              <span>全部工具&gt;</span>
            </p>
          </div>
          <div className="bottom-bottom">
            <button
              style={{ zIndex: "99", height: "117px" }}
              onClick={handlePrevClick}
            >
              Prev
            </button>
            <div
              style={{
                overflowX: "hidden",
                scrollBehavior: "smooth",
                whiteSpace: "nowrap",
                transform: `translateX(-${scrollLeft}px)`,
              }}
            >
              {toolsData.map((tool, index) => (
                <div
                  key={index}
                  style={{
                    display: "inline-block",
                    width: `${slideWidth}px`,
                    marginRight: "-40px",
                  }}
                >
                  <video
                    ref={videoRef}
                    controls
                    controlsList="nodownload nofullscreen noremoteplayback noskiplevel"
                    style={{ height: "100px", marginTop: "-10px" }}
                  >
                    <source src={tool.video} type="video/mp4" />
                  </video>
                  <p
                    style={{
                      background: "#F7F7F7",
                      width: "125px",
                      marginTop: "-1px",
                      textAlign: "center",
                      height: "35px",
                    }}
                  >
                    {tool.title}
                  </p>
                </div>
              ))}
            </div>
            <button
              style={{ zIndex: "99", height: "117px" }}
              onClick={handleNextClick}
            >
              Next
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

export default AinputDraft;
